<template>
	<view>
		<view class="tips">
			<text>我的上课安排</text>
			<view class="viewBtn" @tap="myclass">去查看</view>
		</view>
		
		<view class="list">
			<view v-if="!isNull" v-for="itm in orderList" class="item" @click="goDetail(itm.shopId,itm.id,itm.className,itm.id)">
				<view class="header">
					<view class="subTitle">{{itm.shopName}} 
					   <image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/right_arrow.png" class="icon_arrow"></image>
					</view>
					<view>已有{{itm.number}}人报名</view>
				</view>
				<view class="content">
					<image :src='itm.image' class="thumb" mode="widthFix"></image>
					<view style="width:80%;margin-left:10px;">
						<view class="title">{{itm.className}}</view>
						<view><image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/dz@2x.png" class="icon_arrow"></image> {{itm.classAddress}}</view>
						<view><image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/sj@2x.png" class="icon_arrow"></image> {{itm.startTime}}-{{itm.endTime}}</view>
					</view>
				</view>
			</view>
			<view v-if="isNull" class="order_null">
				<image src="../../static/null/banji@2x.png"></image>
				<text>暂时还没有班级记录~</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderList:'',
				isNull:false,
				shopId:''
			}
		},
		onLoad() {
			this.shopId = uni.getStorageSync('shopId')
		},
		onShow() {
			this.getOrderList()
		},
		methods: {
			myclass(){
				uni.navigateTo({
					url:'course'
				})
			},
			goDetail(shopId, classOrActivityId, className, id){
				uni.navigateTo({
					url:'class_detail?shopId=' + shopId + '&classOrActivityId=' + classOrActivityId +
						'&className=' + className + '&id=' + id,
				})
			},
			async getOrderList() {
				let _this = this
				this.$api.getMyClass({
					shopId:this.shopId
				}).then((res) => {
					if (res.data.code == 200) {
						console.log(res.data.dataMap)
						_this.orderList = res.data.dataMap
						_this.isNull = _this.orderList.length < 1 ? true : false
						for (var i = 0; i < _this.orderList.length; i++) {
							_this.orderList[i].startTime = _this.datatime(res.data.dataMap[i].startTime)
							_this.orderList[i].endTime = _this.datatime(res.data.dataMap[i].endTime)
						}
			
			
					}
				})
			},
			datatime(value) {
				var data = new Date(value);
				var month = data.getMonth() < 9 ? "0" + (data.getMonth() + 1) : data.getMonth() + 1;
				var date = data.getDate() <= 9 ? "0" + data.getDate() : data.getDate();
				return data.getFullYear() + "-" + month + "-" + date;
				console.log(data.getFullYear() + "-" + month + "-" + date)
			},
		}
	}
</script>

<style lang="scss">
	.order_null {
		display: flex;
		width: 100%;
		flex-direction: column;
	}
	
	.order_null text {
		margin: 0 auto;
		color: #c8c8c8;
	}
	
	.order_null image {
		margin: 60rpx auto;
		width: 300rpx;
		height: 300rpx;
	}
  page{background: #F8F8F8;padding:10px;}
  .subTitle{color:#666666;font-size:30rpx;display: flex;align-items: center;}
  .icon{width: 13px;height: 13px;}
  .tips{
	  display: flex;
	  justify-content: space-between;
	  color:#FF9933;
	  background:#ff99331a;
	  border-radius: 5px;
	  padding: 5px 20px;
	  align-items: center;
	  .viewBtn{
		  background: #FF9933;
		  border-radius: 50rpx;
		  font-size:24rpx;
		  height: 36px;line-height: 36px;
		  color:white;padding:0px 30px;
	  }
  }
  .header{display: flex;justify-content: space-between;color:#666666;padding:10px;}
  .content{display: flex;
     padding:5px 10px;
     .thumb{border-radius: 5px;width:180rpx;}
  		 .title{font-size: 28rpx;font-weight: bold;margin-bottom: 5px;color:#222222}
  		 .detail{display: flex;justify-content: space-between;margin-top:20px;}
  }
  
  .item{background-color: white;margin-top:10px;border-radius: 5px;padding:10px;color:#666666}
</style>
